<template>
	<view class="userLayout pageBg">
		<view class="userInfo">
			<view class="avatar" @click="goLogin">
				<image v-if="userinfo" :src="userinfo.avatar"></image>
				<image v-else src="/static/font/user.png" mode="aspectFit"></image>
			</view>

			<view class="info clipSectorIn">
				<text class="info1">{{userinfo?userinfo.nickName : "初次见面！"}}</text>
				<text class="info2">{{userinfo.introduction?userinfo.introduction :"要留下点什么吗!"}}</text>
			</view>

			<view v-if="!isLogin" class="user-login lightSpeedInLeft" @click="goLogin">登录
				<uni-icons type="right" size="30"></uni-icons>
			</view>
			<view v-else class="extra"></view>
			<!-- 获取一些佳句，每日刷新 -->

		</view>

		<view class="section">
			<view class="list">
				<view @click="myCollection" class="row">
					<view class="left">
						<uni-icons type='download-filled' size='25'></uni-icons>
						<view class="text">我的收藏</view>
					</view>
					<view class="right">
						<view class="text">{{userinfo.collectCount ? userinfo.collectCount:1 }}</view> <uni-icons
							type='right' size='15' color="#aaa"></uni-icons>
					</view>
				</view>
				<view class="row" @click="myUpload">
					<view class="left">
						<uni-icons type='cloud-upload' size='25'></uni-icons>
						<view class="text">我的上传</view>
					</view>
					<view class="right">
						<view class="text">{{userinfo.uploadCount ? userinfo.uploadCount :1}}</view> <uni-icons
							type='right' size='15' color="#aaa"></uni-icons>
					</view>
				</view>
				<view class="row">
					<view class="left">
						<uni-icons type='chatboxes-filled' size='25'></uni-icons>
						<view class="text">联系客服</view>
					</view>
					<view class="right">
						<view class="text"></view> <uni-icons type='right' size='15' color="#aaa"></uni-icons>
					</view>
					<!-- 微信小程序端的联系客服 -->
					<!-- #ifdef MP -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- 其他端的拨打点话 -->
					<!-- #ifndef MP -->
					<button @click="call">拨打电话</button>
					<!-- #endif -->

				</view>
			</view>
		</view>
		<view class="section">
			<view class="list">
				<!-- <view class="row">
					<view class="left">
						<uni-icons type='notification-filled' size='30'></uni-icons>
						<view class="text">订阅更新</view>
					</view>
					<view class="right">
						<view class="text"></view> <uni-icons type='right' size='15' color="#aaa"></uni-icons>
					</view>
				</view> -->
				<view class="row" @click="openSetting">
					<view class="left">
						<uni-icons type='gear-filled' size='30'></uni-icons>
						<view class="text">设置</view>
					</view>
					<view class="right">
						<view class="text"></view> <uni-icons type='right' size='15' color="#aaa"></uni-icons>
					</view>
				</view>
				<!-- <view class="row" >
					<view class="left">
						<uni-icons type='info' size='30'></uni-icons>
						<view class="text">关于</view>
					</view>
					<view class="right">
						<view class="text"></view> <uni-icons type='right' size='15' color="#aaa"></uni-icons>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue"
	import {
		onLoad,
		onReady,
		onPageScroll,
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import {
		loginByWeChat,
		getUserCount
	} from "@/api/user.js"
	import {
		useUserInfoStore,
	} from "@/stores/modules/user.js"
	const userLoginInfo = useUserInfoStore();
	const isLogin = ref(false)
	const isMpWeChat = ref(false)

	const call = () => {
		console.log('拨打电话！');
		uni.makePhoneCall({
			phoneNumber: '9527'
		})
	}
	// 前往收藏页
	const myCollection = () => {
		uni.navigateTo({
			url: "/pages/user/collect",
		})
	}

	const myUpload = () => {
		uni.navigateTo({
			url: "/pages/user/upload",
		})
	}
	const userinfo = ref({
		nickName: "用户XX",
		userId: "2341",
		avatar: "https://z-mytest.oss-cn-beijing.aliyuncs.com/creative/deafultavatar.png",
		isAmdin: true,
		tokenInfo: "132132",
		introduction: "你好",
		collectCount: 1,
		uploadCount: 1
	})


	// 前往登录页
	const goLogin = () => {
		// 判断用户是否登录
		// #ifdef MP-WEIXIN
		console.log("isLogin", isLogin.value);
		if (isLogin.value) {
			// 已经登录，前往用户信息页
			uni.navigateTo({
				url: "/pages/user/userInfo",
			})
		} else {
			// 前往登录页
			uni.navigateTo({
				url: "/pages/user/login",

			})
		}

		// #endif

	}

	// 微信登录
	const weChatLogin = () => {

		// 打开授权页
		// uni.login({
		// 	"provider": "weixin",
		// 	"scopes": "auth_user",
		// 	"onlyAuthorize": true, // 微信登录仅请求授权认证
		// 	success: function(event) {
		// 		const {
		// 			code
		// 		} = event
		// 		console.log("event:", event);
		// 		// 弹出用户授权的弹窗
		// 		uni.authorize({
		// 			scope: 'scope.userInfo',
		// 			success() {
		// 				// 获取用户信息
		// 				uni.getUserInfo({
		// 					provider: 'weixin',
		// 					withCredentials: true,
		// 					code,
		// 					success: function(infoRes) {
		// 						console.log('用户昵称为：', infoRes);
		// 					}
		// 				});
		// 			},
		// 			fail() {
		// 				console.log("获取权限失败！");
		// 			}
		// 		})
		// 	},
		// 	fail: function(err) {
		// 		// 登录授权失败
		// 		// err.code是错误码  弹窗显示失败
		// 	}
		// })

		// 登录，先检查当前用户是否已经注册过
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true, // 微信登录仅请求授权认证
			success: function(event) {
				const {
					code
				} = event
				//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
				let res = loginByWeChat(event.code).then((res) => {
					console.log("res:", res);
					if (res.code == 200) {
						// 获取优化数据信息，以及token信息
						console.log("返回信息：", res.data);

						userinfo.value = res.data || {};
						// 将返回用户信息保存到store中
						userTokenInfo.setUserInfo(userinfo.value);
						isLogin.value = true;
						uni.showToast({
							title: '登录成功',
							duration: 1000
						});
						// 跳转至主面并刷新页面
						// uni.switchTab({
						// 	url: "/pages/index/index"
						// })

						// 刷新当前页面
						uni.startPullDownRefresh()
					}
					if (res.code == 500) {
						// 登录失败
						uni.showToast({
							title: "登录失败",
							icon: "error",
							duration: 100
						})
					}
				})

			},
			fail: function(err) {
				// 登录授权失败
				// err.code是错误码  弹窗显示失败
			}
		})
	}


	onReady(() => {
		// #ifdef MP-WEIXIN
		isMpWeChat.value = true

		// #endif

	})

	onShow(() => {
		// #ifdef MP-WEIXIN
		// 获取登录状态
		let flag = uni.getStorageSync('isLogin')
		isLogin.value = flag
		// 判断是否登录
		if (isLogin.value) {
			// 从缓存中获取用户信息
			userinfo.value = uni.getStorageSync('userInfo')
			// 获取收藏数、上传数
			getUserCount(userLoginInfo.userId).then((res) => {
				if (res.code === 200) {
					// 获取到收藏数、上传数
					userinfo.value.collectCount = res.collect
					userinfo.value.uploadCount = res.upload
				}
			})
		} else {

		}
		// #endif

		// 登录后重新刷新页面
		// uni.startPullDownRefresh()

		console.log("userinfo:", userinfo.value);

		// 获取用户下载的数据、用户素材数据
	})


	// 获取用户信息

	// const getUserInfo = () => {

	// }

	// 刷新页面
	onPullDownRefresh(() => {
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	})

	// 打开设置
	const openSetting = () => {
		uni.openSetting({
			success: (res) => {
				console.log("打开设置");
			}
		});
	}
</script>

<style lang="scss" scoped>
	.userLayout {
		.auth-button {
			margin-top: 40rpx;
			width: 80%;
		}

		.userInfo {

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			/* #ifdef H5 */
			padding: 50rpx 40rpx;
			/* #endif */

			/* #ifdef MP-WEIXIN */
			padding: 160rpx 40rpx 30rpx 40rpx;
			/* #endif */


			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					height: 100%;
					width: 100%;

				}
			}

			.info {

				padding: 20rpx 0 5rpx;
				margin-right: 30rpx;
				margin-bottom: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: left;
				animation-duration: 1s;
				animation-fill-mode: both;

				.info1 {
					font-size: 44rpx;
					color: #333;
					font-weight: 600;
				}

				.info2 {
					font-size: 28rpx;
					color: #aaa;
					margin-top: 20rpx;

				}
			}

			@keyframes clipSectorIn {
				0% {
					clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);
				}

				50% {
					clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
				}

				100% {
					clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
				}
			}

			.clipSectorIn {
				animation-name: clipSectorIn;
			}

			.address {
				font-size: 28rpx;
				color: #aaa;
			}

			.user-login {
				font-size: 44rpx;
				color: #333;
				background-color: #09AB4F;
				border-radius: 10rpx 70rpx 70rpx 10rpx;
				padding: 10rpx 10rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
				animation-duration: 1s;
				animation-fill-mode: both;
			}

			.extra {
				width: 200rpx;
			}


			@keyframes lightSpeedInLeft {
				from {
					transform: translate3d(-100%, 0, 0) skewX(30deg);
					opacity: 0;
				}

				60% {
					transform: skewX(-20deg);
					opacity: 1;
				}

				80% {
					transform: skewX(5deg);
				}

				to {
					transform: translate3d(0, 0, 0);
				}
			}

			.lightSpeedInLeft {
				animation-name: lightSpeedInLeft;
				animation-timing-function: ease-out;
			}
		}

		.section {
			width: 690rpx;
			margin: 20rpx auto;
			// 卡片的效果
			border: 1px solid #eee;
			border-radius: 10rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

			.list {
				.row {
					display: flex;
					/* 均匀排列每个元素   
					   首个元素放置于起点，末尾元素放置于终点 */
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					height: 100rpx;
					border-bottom: 1px solid #eee;
					position: relative;

					&:last-child {
						border-bottom: 0;
					}

					.left {
						display: flex;
						// 竖直方向上居中
						align-items: center;

						:deep() {
							.uni-icons {
								color: $brand-theme-color !important;
							}
						}

						.text {
							padding-left: 20rpx;
							color: #666;
						}
					}

					.right {
						display: flex;
						// 竖直方向上居中
						align-items: center;

						.text {
							font-size: 28rpx;
							color: #aaa;
						}
					}

					button {
						position: absolute;
						left: 0;
						top: 0;
						height: 100rpx;
						width: 100%;
						// 透明度
						opacity: 0;
					}
				}
			}
		}
	}
</style>